<template>
  <Drawer v-model:show="modalShow" @close="clearFridgeSettingModal">
    <template #header>
      <view class="drawer-title-box">
        <text class="drawer-title">{{ currentGroup?.name }}</text>
      </view>
    </template>
    <view class="content">
      <view class="drawer-slientMode" v-if="currentGroupKey === REFRIGERTORB_SLIENTMODE">
        <view class="modal-box" v-for="item in currentGroup?.enumValues" @click="changeModal(item)">
          <view class="modal-title">
            <view class="title-text">
              <text v-if="item.bshValue === REFRIGERTORB_SLIENTMODE_FUNCTION">{{
                $t('RefrigeratorB.Setting.SlientMode.Function.Text')
              }}</text>
              <text v-else-if="item.bshValue === REFRIGERTORB_SLIENTMODE_SLIENT">{{
                $t('RefrigeratorB.Setting.SlientMode.Slient.Text')
              }}</text>
              <text v-else-if="item.bshValue === REFRIGERTORB_SLIENTMODE_SLEEP">{{
                $t('RefrigeratorB.Setting.SlientMode.Sleep.Text')
              }}</text>
            </view>
            <view class="title-redio">
              <image src="@/static/Radio.png" mode="aspectFit" v-if="item.machineValue == currentDefault"></image>
              <image src="@/static/RadioEmpty.png" mode="aspectFit" v-else></image>
            </view>
          </view>
          <view class="modal-tips">
            <text v-if="item.bshValue === REFRIGERTORB_SLIENTMODE_FUNCTION">{{
              $t('RefrigeratorB.SettingModal.Function.Tips.Text')
            }}</text>
            <text v-else-if="item.bshValue === REFRIGERTORB_SLIENTMODE_SLIENT">{{
              $t('RefrigeratorB.SettingModal.Selient.Tips.Text')
            }}</text>
            <text v-else-if="item.bshValue === REFRIGERTORB_SLIENTMODE_SLEEP">{{
              $t('RefrigeratorB.SettingModal.Sleep.Tips.Text')
            }}</text>
          </view>
          <view
            class="modal-peaker"
            v-if="item.bshValue === REFRIGERTORB_SLIENTMODE_SLEEP"
            :class="{
              inactive: currentDefault != 2,
            }"
          >
            <view class="peaker-tips">{{ $t('RefrigeratorB.SettingModal.Sleep.PeakerTips.Text') }}</view>
            <TimePeakGroup
              :show="pickerShow"
              :start-time-hour="stratTimeHour"
              :start-time-min="startTimeMin"
              :end-time-hour="stratTimeHour"
              :end-time-min="startTimeMin"
              :is-current-date="isCurrentDateIndex"
              @timechange="timechange"
            ></TimePeakGroup>
          </view>
        </view>
        <view class="btn-group">
          <view class="cancel-btn" @click="cancelModal">{{ $t('RefrigeratorB.SettingModal.Cancel.Text') }}</view>
          <view class="confirm-btn" @click="confirmModal">{{ $t('RefrigeratorB.SettingModal.Confirm.Text') }}</view>
        </view>
      </view>
    </view>
  </Drawer>
</template>
<script lang="ts" setup>
import Drawer from '@/common/drawer.vue'
import type { RefrigeratorBController, SleepTime } from '@/controller/RefrigeratorB/definition'
import {
  REFRIGERTORB_SLIENTMODE,
  REFRIGERTORB_SLIENTMODE_FUNCTION,
  REFRIGERTORB_SLIENTMODE_SLIENT,
  REFRIGERTORB_SLIENTMODE_SLEEP,
  REFRIGERTORB_SLIENTMODE_SLEEP_HOUR,
  REFRIGERTORB_SLIENTMODE_SLEEP_MIN,
  REFRIGERTORB_SLIENTMODE_SLEEP_END_HOUR,
  REFRIGERTORB_SLIENTMODE_SLEEP_END_MIN,
} from '@/constants/Command'
import { getAllSetting, setSettingByNokeySettings, setSettingByNokeySettingsGroup } from '@/api/appliance'
import TimePeakGroup from '@/common/timePeakGroup.vue'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import i18n from '@/i18n'
const props = defineProps<{
  show: boolean
  control: RefrigeratorBController.Control
}>()
type ModalGroups = {
  default: string
  key: string
  value: string | number
}
type EnumValues = {
  bshValue: string
  machineValue: string
}
const emit = defineEmits<{
  (e: 'update:show', show: boolean): void
  (e: 'close'): void
}>()
const modalShow = computed({
  get() {
    return props.show
  },
  set(show) {
    emit('update:show', show)
  },
})
/**
 * 初始化
 */
const currentGroup = computed(() => props.control.store.currentMenuSettings)
const currentGroupKey = computed(() => props.control.store.currentMenuGroupKey)
const currentDefault = ref(0)
const stratTimeHour = ref<string[]>([])
const startTimeMin = ref<string[]>([])
const isCurrentDate = ref<string[]>([])
const isCurrentDateIndex = ref<number[]>([])
const pickerShow = ref(false)
const sleepTime = ref<SleepTime>({ startHour: '', startMin: '', endHour: '', endMin: '' })
watch(
  () => modalShow.value,
  (modalShow) => {
    if (modalShow) {
      currentDefault.value = currentGroup.value?.value as number
      currentBshValue.value = currentGroup.value?.enumValues.find(
        (items) => items.machineValue == currentDefault.value
      ).bshValue
      initCurrentDate()
    }
  }
)
const slientArry = [
  REFRIGERTORB_SLIENTMODE_SLEEP_HOUR,
  REFRIGERTORB_SLIENTMODE_SLEEP_MIN,
  REFRIGERTORB_SLIENTMODE_SLEEP_END_HOUR,
  REFRIGERTORB_SLIENTMODE_SLEEP_END_MIN,
]
async function initCurrentDate() {
  isCurrentDate.value = []
  const settings = props.control.store.allSettings

  slientArry.map((items) => {
    const group = settings.find((item) => item.key === items)
    const value = group?.value as number
    isCurrentDate.value.push(value < 10 ? `0${value}` : `${value}`)
  })
  isCurrentDateIndex.value[0] = stratTimeHour.value.findIndex((items) => items === isCurrentDate.value[0])
  isCurrentDateIndex.value[1] = startTimeMin.value.findIndex((items) => items === isCurrentDate.value[1])
  isCurrentDateIndex.value[2] = stratTimeHour.value.findIndex((items) => items === isCurrentDate.value[2])
  isCurrentDateIndex.value[3] = startTimeMin.value.findIndex((items) => items === isCurrentDate.value[3])
  sleepTime.value.startHour = isCurrentDate.value[0]
  sleepTime.value.startMin = isCurrentDate.value[1]
  sleepTime.value.endHour = isCurrentDate.value[2]
  sleepTime.value.endMin = isCurrentDate.value[3]

  pickerShow.value = true
}
// 消息免打扰初始值

for (var j = 0; j <= 23; j++) {
  let tempMinute = j < 10 ? '0' : ''
  stratTimeHour.value.push(`${tempMinute}${j}`)
  // 增加24:00
}

for (var y = 0; y <= 59; y++) {
  let tempMinute = y < 10 ? '0' + y.toString() : y.toString()
  startTimeMin.value.push(tempMinute)
}

function timechange(data: SleepTime) {
  sleepTime.value = data
}
/**
 * 确定
 */
async function confirmModal() {
  if (sleepTime.value.startHour === sleepTime.value.endHour && sleepTime.value.startMin === sleepTime.value.endMin) {
    return uni.showToast({
      icon: 'none',
      title: i18n.global.t('RefrigeratorB.SettingModal.SleepModalTips.Text'),
    })
  }
  if (currentBshValue.value === REFRIGERTORB_SLIENTMODE_SLEEP) {
    let data = [
      {
        key: REFRIGERTORB_SLIENTMODE,
        value: REFRIGERTORB_SLIENTMODE_SLEEP,
      },
      {
        key: REFRIGERTORB_SLIENTMODE_SLEEP_HOUR,
        value: sleepTime.value.startHour,
      },
      {
        key: REFRIGERTORB_SLIENTMODE_SLEEP_MIN,
        value: sleepTime.value.startMin,
      },
      {
        key: REFRIGERTORB_SLIENTMODE_SLEEP_END_HOUR,
        value: sleepTime.value.endHour,
      },
      {
        key: REFRIGERTORB_SLIENTMODE_SLEEP_END_MIN,
        value: sleepTime.value.endMin,
      },
    ]
    await setSettingByNokeySettingsGroup(props.control.store._datasource.haId, data)
    safeTrack(() => {
      trackEvent(
        'appliance_setting',
        {
          setting_key: REFRIGERTORB_SLIENTMODE,
          setting_value: REFRIGERTORB_SLIENTMODE_SLEEP,
        },
        TrackType.ApplianceDetail
      )
    })
  } else {
    await setSettingByNokeySettings(
      props.control.store._datasource.haId,
      REFRIGERTORB_SLIENTMODE,
      currentBshValue.value
    )
    safeTrack(() => {
      trackEvent(
        'appliance_setting',
        {
          setting_key: REFRIGERTORB_SLIENTMODE,
          setting_value: currentBshValue.value,
        },
        TrackType.ApplianceDetail
      )
    })
  }

  clearFridgeSettingModal()
}
function cancelModal() {
  clearFridgeSettingModal()
}
function clearFridgeSettingModal() {
  emit('close')
  pickerShow.value = false
}
/**
 * 选择模式
 * @param item
 */
const currentBshValue = ref('')
async function changeModal(item: EnumValues) {
  currentDefault.value = Number(item.machineValue)
  currentBshValue.value = item.bshValue
}
</script>
<style lang="less" scoped>
.inactive {
  pointer-events: none;
  opacity: 0.3;
}
.drawer-title-box {
  height: 56rpx;
  .drawer-title {
    font-weight: 600;
    font-size: 40rpx;
    color: var(--dark-color);
  }
}
.content {
  .drawer-slientMode {
    .btn-group {
      display: flex;
      border-top: 1px solid var(--primary-grey-medium, #e9e9ed);
      background: #fff;
      width: calc(100% + 64rpx);
      // transform: translateX(-32rpx);
      margin-top: 16rpx;
      margin-left: -32rpx;
      & > view {
        width: 50%;
        height: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30rpx 0 0;
        color: var(--primary-petrol, #2d3746);
        font-size: 32rpx;
        font-weight: 600;
        letter-spacing: -0.429px;
        text-transform: capitalize;
      }
      .confirm-btn {
        color: rgba(64, 141, 242, 1);
      }
    }
    .modal-box {
      background: #f4f4f6;
      margin-bottom: 48rpx;
      padding: 32rpx;
      .modal-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title-text {
          color: var(--primary-petrol, #2d3746);
          font-size: 16px;
          font-weight: 600;
          letter-spacing: -0.5px;
        }
        .title-redio {
          display: flex;
          align-items: center;
          image {
            height: 40rpx;
            width: 40rpx;
          }
        }
      }
      .modal-tips {
        margin-top: 16rpx;
        color: #333;
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: -0.5px;
        font-size: 24rpx;
      }
      .modal-peaker {
        .peaker-tips {
          margin: 24rpx 0;
          color: var(--primary-petrol, #2d3746);
          font-size: 28rpx;
          font-weight: 400;
          letter-spacing: -0.5px;
        }
      }
    }
  }
}
</style>
